<template>
  <div class="user">
    <div class="userInfo">
      <van-image
        class="avatar"
        round
        fit="cover"
        width="80px"
        height="80px"
        :src="require(`@/assets/images/${userInfo.avatar}.jpeg`)"
      />
      <div class="username">{{ userInfo.username }}</div>
      <van-button class="button" type="primary" round size="small" @click="logout">退出登录</van-button>
    </div>
    <div class="user-list">
      <van-cell class="cell" v-for="(item, index) in userList" :key="index" is-link>
        <template #title class="title">
          <van-image
            class="avatar"
            round
            fit="cover"
            width="40px"
            height="40px"
            :src="require(`@/assets/images/${item.avatar}.jpeg`)"
          />
          <div class="username">{{ item.username }}</div>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'UserList',
  data() {
    return {}
  },
  mounted() {},
  computed: {
    ...mapState(['userInfo', 'userList'])
  },
  methods: {
    ...mapMutations(['Logout']),
    logout() {
      this.Logout()
      this.$socket.close()
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>

<style scoped lang="less">
.user {
  .userInfo {
    position: relative;
    z-index: 99;
    height: 100px;
    display: flex;
    align-items: center;
    font-size: 30px;
    padding: 30px 15px;
    border-bottom: 2px solid #fff;
    .avatar {
      border: 1px solid #fff;
      box-shadow: 0 0 2px #000;
    }
    .username {
      margin-left: 10px;
    }
    .button {
      position: absolute;
      right: 15px;
      top: 34px;
    }
  }
  .user-list {
    height: 78vh;
    overflow-y: scroll;
    .van-cell {
      background: transparent;
      border-bottom: 1px solid #fff;
      padding: 5px 16px;
      font-size: 20px;
    }
    /deep/.cell {
      display: flex;
      align-items: center;
      .van-cell__title {
        display: flex;
        align-items: center;
        .username {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
